<template>
  <div id="registerForm" v-loading="loading">
    <el-header class="headerTop">
      <span class="hoverToBlue ClickText" @click="goback('go')">返回</span>
      <div class="headerTop_count">
        <span class="header_title" :class="{ header_title_active: active == 0 }">① 入职指引说明</span>
        <span class="line"></span>
        <span class="header_title" :class="{ header_title_active: active == 1 }">② 入职登记表</span>
      </div>
    </el-header>
    <div class="area area1" v-if="active == 0">
      <div class="items">
        <div class="item">
          <div class="title" style="width: 90px"><span style="color: red; margin-right: 4px">*</span>登记表名称:</div>
          <div class="element">
            <el-input type="text" v-model="form.name"></el-input>
          </div>
        </div>
        <div class="item">
          <div class="title" style="width: 90px">入职指引说明</div>
          <div class="element">
            <el-radio v-model="form.isOpenEntryGuide" :label="true">开启</el-radio>
            <el-radio v-model="form.isOpenEntryGuide" :label="false">关闭</el-radio>
          </div>
        </div>
        <div class="item tips">
          <span class="text">开启后可编辑入职说明或上传员工手册、入职须知等附件，员工可在人事小程序上查看。</span>
        </div>
        <template v-if="form.isOpenEntryGuide">
          <div class="titleGroup">入职说明</div>
          <div class="item">
            <div class="title"><span style="color: red; margin-right: 4px">*</span>标题:</div>
            <div class="element">
              <el-input type="text" v-model="form.title"></el-input>
            </div>
          </div>
          <div class="item">
            <div class="title">说明内容:</div>
            <div class="element">
              <el-input type="textarea" v-model="form.content"></el-input>
            </div>
          </div>
          <div class="titleGroup">
            <span>入职资料包</span>
            <el-upload class="upload-demo" action="" multiple :auto-upload="false" :show-file-list="false" :on-change="handleChange">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
          <div class="item">
            <div class="element" style="width: 100%">
              <el-table :data="form.fileResources" style="width: 100%">
                <el-table-column label="文件名称" width="180">
                  <template slot-scope="{ row }">
                    <span @click="window.open(row.url)">{{ row.fileName }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="uploadTime" label="上传时间" width="180"> </el-table-column>
                <el-table-column prop="userName" label="上传人"> </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <span class="iconfont" style="cursor: pointer" @click="deleteFile(scope.row, scope.$index)">&#xe66d;</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="area area2" v-if="active == 1">
      <div class="title">
        <div class="name">功能介绍</div>
        <div class="tips">设置后将影响新入职员工需填写的员工信息字段</div>
      </div>
      <div class="tabels">
        <div class="left">
          <div class="lefttop">分组名称</div>
          <div class="groupList">
            <div @click="groupChange(index)" :class="groupIndex == index ? 'groupItem groupItem_active' : 'groupItem'" v-for="(item, index) in columnSettings" :key="index">{{ item.moduleName }}</div>
          </div>
        </div>
        <div class="right">
          <el-table :data="columnSettings[groupIndex].columns" style="width: 100%">
            <el-table-column prop="columnName" label="字段名称" width="180"> </el-table-column>
            <el-table-column prop="columnType" label="字段类型" width="180"> </el-table-column>
            <el-table-column>
              <template slot="header">
                <el-checkbox @change="all_show" ref="allShow" name="allShow">是否可见</el-checkbox>
              </template>
              <template slot-scope="{ row }">
                <el-checkbox v-model="row.isShow" :disabled="!row.isAllowEdit"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot="header">
                <el-checkbox @change="all_required" ref="allRequired" name="allRequired">是否必填</el-checkbox>
              </template>
              <template slot-scope="{ row }">
                <el-checkbox v-model="row.isRequired" :disabled="!row.isAllowEdit"></el-checkbox>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="footer">
      <!-- <el-button type="default" v-if="active == 0" @click="goback()">取消</el-button> -->
      <el-button type="default" v-if="active == 1" @click="active--">上一步</el-button>
      <el-button type="primary" v-if="active == 0" @click="next">下一步</el-button>
      <el-button type="default" v-if="active == 1" @click="save(0)">保存</el-button>
      <el-button type="primary" v-if="active == 1" @click="save(1)">保存并预览</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
      tagCurrent: (state) => state.tag.tagCurrent,
    }),
  },
  data() {
    return {
      active: 0,
      form: {
        isOpenEntryGuide: false,
        fileResources: [],
        title: "",
        content: "",
        columnSettings: [],
        name: "",
      },
      columnSettings: [{ columns: [] }],
      groupIndex: 0,
      isPrivew: 0,
      id: "",
      loading: false,
    };
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == "inductionSetting" && this.isPrivew == 1) {
      to.params.Privew = {
        isShow: true,
        id: this.id || this.form.registerID,
        name: this.form.name,
      };
    }
    next();
  },
  created() {
    let isEdit = this.$route.query.isEdit;
    console.log(isEdit, typeof isEdit, "isEdit");
    if (isEdit + "" == "true") {
      //修改
      this.getEmplpyEntryRegister(this.$route.query.id);
    } else {
      this.loading = true;
      this.$api.settingApi.GetEmpty().then((res) => {
        this.loading = false;
        this.columnSettings = res.data.data;
      });
    }
  },
  methods: {
    deleteFile(item, index) {
      this.form.fileResources.splice(index, 1);
    },
    getEmplpyEntryRegister(id) {
      this.loading = true;
      this.$api.settingApi.GetEmployeeEntryRegister({ registerId: id }).then((res) => {
        this.loading = false;
        this.form = res.data.data;
        this.columnSettings = res.data.data.columnSettings;
      });
    },
    save(isPrivew) {
      this.isPrivew = isPrivew;
      let isEdit = this.$route.query.isEdit;
      let dataParams = [];
      this.columnSettings.forEach((item) => {
        item.columns.forEach((column) => {
          dataParams.push({
            columnID: column.columnID,
            isShow: column.isShow,
            isRequired: column.isRequired,
          });
        });
      });
      this.form.columnSettings = dataParams;
      this.$api.settingApi[isEdit ? "EditEmployeeEntryRegister" : "AddEmployeeEntryRegister"](this.form).then((res) => {
        if (res.data.status == 200) {
          this.id = res.data.data;
          this.$message.success("添加成功");
          setTimeout(() => {
            this.$store.commit("DEL_TAG", this.tagCurrent);
            this.$router.back();
          }, 500);
          return;
        }
        this.$message.warning(res.data.message);
      });
    },
    handleChange(files) {
      let formData = new FormData();
      formData.append("formFile", files.raw);
      let uploadTime = new Date().toLocaleString();
      this.$api.publicApi.uploadOssFile(formData).then((res) => {
        if (res.data.status == 200) {
          this.form.fileResources.push({
            fileName: res.data.data.fileName,
            fileSize: res.data.data.fileSize,
            url: res.data.data.fileUrl,
            userName: this.userInfo.realname,
            uploadTime: uploadTime,
          });
        } else {
          this.$message.warning("文件上传失败,请重试");
        }
      });
    },
    goback(type) {
      if (type == "go") {
        this.$router.go(-1);
      }
    },
    next() {
      if (this.active == 0) {
        if (!this.form.name) {
          this.$message.warning("请输入登记表名称");
          return;
        }
        if (this.form.isOpenEntryGuide) {
          if (!this.form.title) {
            this.$message.warning("请输入标题");
            return;
          }
        }
      }
      this.active++;
    },

    groupChange(index) {
      this.groupIndex = index;
      this.$refs.allShow.model = !this.columnSettings[this.groupIndex].columns.find((m) => !m.isShow);
      this.$refs.allRequired.model = !this.columnSettings[this.groupIndex].columns.find((m) => !m.isRequired);
    },
    all_show(e) {
      this.columnSettings[this.groupIndex].columns.forEach((item) => {
        if (item.isAllowEdit) {
          item.isShow = e;
        }
      });
    },
    all_required(e) {
      this.columnSettings[this.groupIndex].columns.forEach((item) => {
        if (item.isAllowEdit) {
          item.isRequired = e;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
#registerForm {
  overflow: hidden;
  .headerTop {
    // header
    box-shadow: 0px 0px 15px 1px #c2c3c7;
    position: relative;
    z-index: 100;
    height: 50px !important;

    > span {
      float: left;
      line-height: 50px;
      text-decoration: underline;
      font-size: 14px;
    }

    .headerTop_count {
      width: 100%;
      text-align: center;
    }

    .header_title {
      display: inline-block;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      width: 15%;
      min-width: 80px;
      text-align: center;
    }

    .header_title_active {
      color: #39a4ed;
      border-bottom: 2px solid #39a4ed;
    }
    .hoverToBlue {
      color: #39a4ed;
    }

    .line {
      // width: 20%;
      width: 6%;
      margin: 0 5px;
      display: inline-block;
      // border-bottom: 1px dashed #39A4ED;
      position: relative;
      top: -4px;
    }
  }
  .area {
    width: 100%;
    height: 93%;
    padding: 20px;
    height: calc(100% - 115px);
    overflow: auto;
  }
  .area1 {
    .items {
      width: 650px;
      .item {
        display: flex;
        align-items: center;
        margin-top: 15px;
        .title {
          font-size: 14px;
          margin-right: 18px;
          width: 60px;
          text-align: right;
        }
        .element {
          width: 572px;
          .el-table {
            width: 100%;
          }
        }
      }
      .tips {
        margin-top: 0px !important;
        .text {
          font-size: 12px;
          color: #999999;
        }
      }
      .titleGroup {
        font-size: 14px;
        font-weight: 600;
        border-left: 5px solid #39a4ed;
        padding-left: 10px;
        margin-top: 30px;
        position: relative;
        line-height: 16px;
        .upload-demo {
          position: absolute;
          top: -6px;
          right: 0px;
        }
      }
    }
  }
  .area2 {
    .title {
      display: flex;
      align-items: flex-end;
      .name {
        font-weight: 600;
        font-size: 16px;
      }
      .tips {
        font-size: 12px;
        color: #999999;
        margin-left: 6px;
      }
    }
    .tabels {
      width: 100%;
      // height: 90%;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      .left {
        width: 30%;
        // height: 100%;
        border: 1px solid #ebeef1;
        .lefttop {
          background-color: #f5f8fd;
          width: 100%;
          height: 38px;
          line-height: 38px;
          padding-left: 15px;
          font-weight: 500;
          font-size: 16px;
        }
        .groupList {
          .groupItem {
            font-size: 14px;
            padding: 8px 0 8px 15px;
          }
          .groupItem_active {
            background-color: #ebeef1;
            cursor: pointer;
          }
          .groupItem:hover {
            background-color: #ebeef1;
            cursor: pointer;
          }
        }
      }
      .right {
        width: 68%;
        height: 100%;
        border: 1px solid #ebeef1;
      }
    }
  }
  .footer {
    border-top: 1px solid #c2c3c7;
    position: absolute;
    bottom: 0;
    width: 97%;
    height: 65px;
    line-height: 65px;
    text-align: center;
    background-color: white;
    z-index: 2;
    .el-button {
      margin-right: 15px;
      width: 90px;
      height: 35px;
    }
  }
}
</style>
